/* ====================swiper======================= */	

@keyframes zoomUp {
  100% {
    transform: scale(1);
  }
  0% {
    transform: scale(1.15);
  }
}
.swiper{
	width: 100%;
	height: 100vh;
  position: relative; 
  overflow: hidden ;  
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
  animation: zoomUp 10s linear 0s normal both;
}
.swiper-slide img {
  height: 100vh;
  width: 100%;
  z-index: 20;
  position: absolute ;
  object-fit: cover ;
}
.swiper-pagination-fraction{
	font-weight: 200;
	font-size: 30px;
	font-family: "Urbanist", sans-serif;
	color: rgb(63, 39, 79) !important;
  text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
}

.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-color: rgb(63, 39, 79); 
  text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
}

.autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
  color: var(--swiper-theme-color);
--swiper-theme-color: rgb(63, 39, 79);
}

.autoplay-progress svg {
--progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--swiper-theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

/* ==================================================== */



/* ==================================================== */



/* iPad（タブレット）用の調整 */
@media (max-width: 1367px) and (hover: none) {
  .swiper {
    width: 100%;
    height: 100vh; /* iPadの動的な高さに対応 */
  }
  .swiper-slide {
    display: flex;
    align-items: center;    /* これで上下中央 */
    justify-content: center; /* これで左右中央 */
    height: 100vh;
    position: relative;
  }
  .swiper-slide img {
    width: 100%;
    object-fit: contain;
  }
  
  .autoplay-progress {
    position: absolute;
    /* bottomを16px（画面端）ではなく、画像の下端に来るように計算 */
    bottom: calc(50% - 23.62vw + 16px);
    right: 16px;
    z-index: 30; /* 画像(z-index: 20)より上に */
  }

  .swiper-pagination-fraction {
    bottom: calc(50% - 23.62vw + 20px) !important;
  }
  
  @keyframes zoomUp {
    100% {
      transform: scale(1);
    }
    0% {
      transform: scale(1);
    }
  }
}

@media (max-width: 926px) and (orientation: landscape) {
  .swiper-slide img {
    width: 100%;
    object-fit: cover;
  }
}

@media (orientation: portrait) and (max-width: 601px){
  .swiper-slide img {
    width: 100%;
    object-fit: contain;
  }
  
  .autoplay-progress{
    display: none;
  }

  .swiper-pagination-fraction{
    display: none;
  }
  
  .swiper-button-next::after, .swiper-button-prev::after {
    font-size: 30px !important;
  }

  @keyframes zoomUp {
    100% {
      transform: scale(1);
    }
    0% {
      transform: scale(1);
    }
  }

}